<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>

    <script src="./../vue/vue.js"></script>

    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>

    <!-- 
        v-for 
            1、将数组对应一组对象 v-for="(intem,index）in items"
            2、可以遍历对象中的属性 v-for="(value,name,index) in object"
            3、key 值的绑定 ，v-for 默认采用的是 “就地更新”的策略，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。所以采用绑定key的方法，
            4、数组过滤/排序操作
            5、v-for 和 v-if    vue 并不推荐这种写法，更加推荐使用计算属性，将if的判断结果筛选出来


            6、 在 组件上 使用v-for
     -->

    <div id="app">

        <div>
            <ul>
                <li v-for="message in messages" :key="message.id">这是第{{ message.title }}行</li>
            </ul>
        </div>

        <div>
            <ul>
                <li v-for="(item, index) in messages" :key="index" @click="messages.splice(index,1)">这是第{{ index }}行</li>
            </ul>
        </div>


        <div>
            <div>v-for 还可以遍历对象的属性和值</div>
            <ul>
                <li v-for="(value,name,index) in people">{{ "" + index + name + ":" + value }}</li>
            </ul>
        </div>

        <div>
            <div>数组的过滤操作</div>
            <ul>
                <li v-for="(item,index) in firstFiveMessage" :key="index">{{ item.title }}</li>
            </ul>
        </div>

        <div>
            <div>v-for 和 v-if </div>
            <ul>
                <li v-for="(item,index) in messages" :key="index" v-if="item.id>=5">{{ item.title }}</li>
            </ul>
        </div>

        <!-- 一个组件相关的例子 -->
        <div>
            <div>
                <div :class="{red: isRed}">{{ alertMessage }}</div>
                <input type="text" placeholder="输入来添加" v-model="inputValue">
                <input type="button" value="添加" @click="onClickAddButton">
            </div>
            <div>
                <ul>
                    <li is="list-item" v-for="(title,index) in componentTitles" :key="index" :title="title" @remove="componentTitles.splice(index,1)"></li>
                </ul>
            </div>
        </div>
        

        

    </div>

    <script>

        Vue.component("list-item", {
            template: `
                <li>{{ title }}<input type="button" value="remove" @click="$emit('remove')"></li>
            `,
            props: ["title"]
        })

        let vm = new Vue({
            el: "#app",
            data: {
                messages: [
                    {id: 0, title: "0"},
                    {id: 1, title: "1"},
                    {id: 2, title: "2"},
                    {id: 3, title: "3"},
                    {id: 4, title: "4"},
                    {id: 5, title: "5"},
                    {id: 6, title: "6"},
                ],
                people: {
                    name: "小明",
                    age: 24,
                    sex: "男"
                },

                inputValue: "",
                alertMessage: "这里输入文字",
                isRed: false,
                componentTitles: [
                ]

            },
            computed: {
                firstFiveMessage(){
                    return this.messages.filter(obj=>{
                        return obj.id<5
                    })
                }
            },
            watch: {
                inputValue: function(newValue,oldValue){
                    if(newValue.length>0){
                        this.isRed = false
                        this.alertMessage = "这里输入文字"
                    }else{
                        this.isRed = true
                        this.alertMessage = "必须输入文字哦"
                    }
                }
            },
            methods: {
                onClickAddButton(){
                    if(this.inputValue.length>0){
                        this.componentTitles.push(this.inputValue)
                    }
                }
            },
        })

    </script>
    
</body>
</html>